<template>
	<view class="bd">
		<view class="fixedHeader">
			<view class="pageTitle">
				<text>我的书架</text>
			</view>

			<view class="itemFilter">
				<view @click="bookCategories.show = true">
					<text>分类: {{ bookCategories.data[bookCategories.selectedIndex].categoryName }}</text>
					<u-icon name="arrow-down-fill" size="12px"></u-icon>
				</view>

				<view @click="listOrder.show = true">
					<text>排序: {{ listOrder.labels[listOrder.selected] }}</text>
					<u-icon name="arrow-down-fill" size="12px"></u-icon>
				</view>
			</view>
		</view>

		<view class="bookContainer">

			<view class="bookItem" v-for="(item, index) in bookData" :key="item.book.id">

				<image mode="aspectFill" @click="gotoReadBook(index)" :src="item.book.bookImg"></image>

				<view>

					<view @click="gotoReadBook(index)">
						<view style="font-weight: bold;">
							<label>{{ item.book.bookName }}</label>
							<label style="color: #888;">{{ " - " + item.book.author }}</label>
						</view>

						<view style="color: #888;font-weight: 300;">
							{{ item.book.bookDescription }}
						</view>

					</view>

					<view>
						<view>
							{{ "收藏于 " + timeArr2HumanStr(item.enterTime) }}
						</view>

						<view class="delBtn" @click="delBook(index)">
							<uni-icons type="trash" size="20px" color="#f55"></uni-icons>
							<label>删除</label>
						</view>
					</view>

				</view>

			</view>

		</view>

		<view v-if="bookData.length == 0" style="margin: 8px; text-align: center;">没有已收藏书籍!</view>

		<u-picker :show="bookCategories.show" :columns="[bookCategories.data]" keyName="categoryName"
			visibleItemCount="9" :closeOnClickOverlay="true" :immediateChange="true"
			@close="bookCategories.show = false" @cancel="bookCategories.show = false"
			@confirm="changeBookCategories()"></u-picker>

		<u-picker :show="listOrder.show" :columns="[listOrder.labels]" visibleItemCount="9" :closeOnClickOverlay="true"
			:immediateChange="true" @close="listOrder.show = false" @cancel="listOrder.show = false"
			@confirm="changeListOrder()"></u-picker>

	</view>
</template>

<script>
	import {
		showUserBooklist,
		addtoUserBooklist,
		delfromUserBooklist,
		getBookCategories,
	} from "@/config/api.js"

	import {
		timeArr2HumanStr
	} from "@/utils.js"

	export default {
		data() {
			return {
				bookData: [{
					"book": {
						"author": "Author Author",
						"bookCategories": 0,
						"bookDescription": "bookDescription, bookDescription, bookDescription, bookDescription, bookDescription, bookDescription",
						"bookImg": "https://sprtlias.oss-cn-hangzhou.aliyuncs.com/ce021eaf-caf9-4ca8-9e10-f8e48277e989.jpg",
						"bookName": "BookName BookName BookName",
						"bookUrl": "",
						"id": 111,
						"permission": 0
					},
					"enterTime": "17000000000000000"
				}],
				bookData: [],

				timeArr2HumanStr,

				bookCategories: {
					show: false,
					selectedIndex: 0,
					data: [{
						"categoryName": "全部",
						"id": undefined,
					}]
				},
				listOrder: {
					show: false,
					selected: 0,
					labels: ['时间 ↓', '时间 ↑']
				},

			}
		},
		mounted() {
			this.getBooks();

			(async () => {
				var res = await getBookCategories()
				console.log(res)
				this.bookCategories.data = [{
					"categoryName": "全部",
					"id": undefined,
				}].concat(res)
			})();

		},
		methods: {
			async getBooks() {
				const res = await showUserBooklist(this.bookCategories.data[this.bookCategories.selectedIndex].id,
					this.listOrder.selected)
				console.log(res)
				this.bookData = res
			},

			changeBookCategories(e) {
				this.bookCategories.show = false
				//console.log(e)
				this.bookCategories.selectedIndex = e.indexs[0]
				this.getBooks()
			},

			changeListOrder(e) {
				this.listOrder.show = false
				//console.log(e)
				this.listOrder.selected = e.indexs[0]
				this.getBooks()
			},

			gotoReadBook(i) {
				var item = JSON.stringify(this.bookData[i].book)
				uni.navigateTo({
					url: `/pages/booksPages/booksPages?item=${item}`
				})
			},

			async delBook(i) {
				var id = this.bookData[i].book.id
				console.log(`Deleting book ${id} at index ${i}`)
				const res = await delfromUserBooklist(id)
				// show errors if needed
				this.getBooks()
			}
		}
	}
</script>

<style scoped>
	.bd {
		width: 100vw;
		height: 100vh;
		background-color: rgba(243, 242, 238, 1);
	}

	.fixedHeader {
		position: sticky;
		top: 0;
		right: 0;
		left: 0;
		z-index: 100;
	}

	.pageTitle {
		position: relative;
		z-index: 90;
		padding: 10px;
		background-color: #eee;
		box-shadow: 0 0 8px #888;
		text-align: center;
	}

	.itemFilter {
		position: relative;
		z-index: 80;
		display: flex;
	}

	.itemFilter>view {
		flex: 1;
		display: flex;
		align-items: baseline;
		justify-content: center;
		font-size: 13px;
		padding: 0 8px;
		background-color: #f8f8f8;
		border: 3px solid white;
		border-top: 6px solid white;
	}

	.itemFilter>view>text {
		flex-grow: 1;
		padding: 6px 0;
	}

	.bookContainer {
		display: flex;
		flex-flow: column;
		gap: 0.7rem;
		align-items: center;
		padding: 0.7rem;
		background-color: rgba(243, 242, 238, 1);
	}

	.bookItem {
		position: relative;
		padding: 8px;
		gap: 18px;
		box-sizing: border-box;
		width: 100%;
		height: 146px;
		background-color: white;
		box-shadow: 6rpx 6rpx 6rpx 3rpx white inset;
		border-radius: 20rpx;
	}

	.bookItem image {
		width: 100px;
		height: 100%;
		flex-shrink: 0;
		border-radius: 10px;
		background-color: #eee;
		box-shadow: 0 0 4px #888;
	}

	.bookItem>view {
		position: absolute;
		top: 8px;
		left: 116px;
		right: 8px;
		bottom: 8px;
	}

	.bookItem>view>view:first-child {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 26px;
		overflow: hidden;
	}

	.bookItem>view>view:first-child>view {
		word-break: break-all;
	}

	.bookItem>view>view:first-child>view:first-child {
		font-size: 16px;
		padding: 2px 0;
	}

	.bookItem>view>view:first-child>view:last-child {
		font-size: 14px;
	}

	.bookItem>view>view:last-child {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.bookItem>view>view:last-child>view:first-child {
		flex-grow: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #888;
	}

	.delBtn {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		flex-flow: row;
		width: 60px;
		height: 24px;
		box-sizing: border-box;
		border: 1px solid #f55;
		border-radius: 100px;
		background-color: rgba(255, 0, 0, 0.075);
	}

	.delBtn label {
		display: block;
		color: #f55;
		font-size: 10px;
	}
</style>